<?php if ($this->session->get("authenticated")): ?>
    <a id="loadnotif" href="#" style="display: none" onclick="show_notif(); return false;"><div id="load-notif" class="loadmore">Show notification</div><br/></a>
    <div id="notif_list"></div>
    <script type="text/javascript">
        ajax_notif_list();
        function ajax_notif_list() {
            biji.load("<?php echo BASE_PATH; ?>/users/notification/<?php echo $this->session->get("user_id") ?>", function(data) {
                if(data != 0) {
                    biji.select("#loadnotif").style.display = 'inline';
                } else {
                    biji.select("#loadnotif").style.display = 'none';
                }
            });
            window.setTimeout('ajax_notif_list()', 100);
        }
        
        function show_notif() {
            biji.select("#load-notif").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';

            biji.load("<?php echo BASE_PATH; ?>/users/notification_feed/<?php echo $this->session->get("user_id") ?>", function(data) {
                if (data != '') {
                    biji.select("#loadnotif").style.display = 'none';
                    biji.select("#notif_list").innerHTML = data;
                    biji.load("<?php echo BASE_PATH; ?>/users/notification_delete/<?php echo $this->session->get("user_id") ?>");
                }
            });
        }
    </script>
<?php endif ?>

<h1>Photo Feed</h1>
<label for="orderby">Order By:</label>
<select name="orderby" id="orderby" onchange="load_feed();">
    <option value="newest">Newest</option>
    <option value="popular">Most popular</option>
    <option value="highest">Highest rating</option>
</select><br /><br />
<ul id="feed-thumbnails" class="thumbnails">
</ul>
<div class="clear"></div>
<a id="loadmore" href="#" style="display: none" onclick="load_more(); return false;"><div id="loadmore-message" class="loadmore">Load more</div></a>
<script type="text/javascript">
    var page = 1;

    load_feed();

    function load_feed() {
        page = 1;
        orderby = biji.select("#orderby").value;

        biji.select("#feed-thumbnails").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';

        biji.load("<?php echo BASE_PATH; ?>/photos/feed_ajax/" + orderby + "/" + page, function(data) {
            if (data != '') {
                biji.select("#loadmore").style.display = 'inline';
                biji.select("#feed-thumbnails").innerHTML = data;
            } else {
                biji.select("#feed-thumbnails").innerHTML = "No photo";
            }
        });
    }

    function load_more() {
        ++page;

        biji.select("#loadmore-message").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';
        
        biji.load("<?php echo BASE_PATH; ?>/photos/feed_ajax/" + orderby + "/" + page, function(data) {
            if (data == '') {
                biji.select("#loadmore").style.display = 'none';
            } else {
                biji.select("#loadmore").style.display = 'inline';
                biji.select("#feed-thumbnails").innerHTML += data;
            }
            
            biji.select("#loadmore-message").innerHTML = 'Load more';
        });
    }
</script>